<template>
  <div class="home-box">
    <!-- 搜索框 -->
    <Search class="search"></Search>
    <div class="content">
      <!-- 轮播图 -->
      <Banner></Banner>
      <!-- 导航 -->
      <NavBar></NavBar>
      <!-- 秒杀 -->
      <SecondsKill></SecondsKill>
      <!-- 商品列表 -->
      <GoodsList></GoodsList>
    </div>
    <!-- 底部 -->
    <FooterBar></FooterBar>
  </div>
</template>

<script>
import Search from "../components/Search.vue";
import Banner from "../components/Banner.vue";
import NavBar from "../components/NavBar.vue";
import SecondsKill from "../components/SecondsKill.vue";
import GoodsList from "../components/GoodsList.vue";
import FooterBar from "../components/FooterBar.vue";

export default {
  name: "Home",
  components: {
    Search,
    Banner,
    NavBar,
    SecondsKill,
    GoodsList,
    FooterBar,
  },
};
</script>

<style scoped>
.home-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search {
  height: 3.125rem;
}

.content {
  flex: 1;
  overflow: auto;
}


.FooterBar{
  height: 3.75rem;
}

</style>